<template>
    <section>
        <!--列表-->
        <div class="panel">
            <div class="panel-head" id="add"><strong><span class="el-icon-date"/>
                <span class="title">资源列表</span></strong></div>
            <el-row style="margin-top: 10px;margin-left: 10px;">
                <el-col :span="2" :offset="20">
                    <el-button type="primary" size="small" @click='addLabel'>添加资源</el-button>
                </el-col>
            </el-row>
            <div class="body-content">
                <el-table :data="tableData" stripe border empty-text v-loading="listLoading" element-loading-text="拼命加载中" style="width: 100%">
                    <el-table-column prop="autoId" width='70' label="编号"/>
                    <el-table-column prop="title" label="功能名称"/>
                    <el-table-column prop="moduleName" label="模块名称"/>
                    <el-table-column prop="uri" width='400' label="URL地址"/>
                    <el-table-column prop="createTime" label="添加时间"/>
                    <el-table-column prop="" width="170" label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" size='mini' @click="editLable(scope.row.resourceId)">编辑</el-button>
                            <el-button type="danger" size='mini' @click='deladmin(scope.$index,scope.row.resourceId)'>删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="block pages paginationMargin">
                    <el-pagination background layout="prev, pager, next" :page-count="total" @current-change="handleCurrentChange"/>
                </div>
            </div>
        </div>
        <el-dialog @close='closedailog' @open='opendailog' :close-on-click-modal='closeOnClickModal' :title='stafftitle' :visible.sync="addLabelVisible" width="40%">
            <el-form label-width="80px">
                <el-form-item label="功能名:" prop="title" :label-width="formLabelWidth">
                    <el-input placeholder="请输入内容" v-model.trim="resource.title" auto-complete="off" style="width: 200px"/>
                </el-form-item>
                <el-form-item label="是否新增:" class='isaddRname' :label-width="formLabelWidth">
                    <el-checkbox @change='addchange' v-model="addchecked"/>
                </el-form-item>
                <el-form-item label="模块名:" prop="title" :label-width="formLabelWidth">
                    <el-select v-if="!addchecked" v-model="resource.moduleName" placeholder="请选择" style="width: 130px">
                        <el-option v-for="item in options" :key="item" :label="item" :value="item"/>
                    </el-select>
                    <el-input v-if="addchecked" placeholder="请输入内容" v-model.trim="resource.moduleName" auto-complete="off" style="width: 200px"/>
                </el-form-item>
                <el-form-item label="URL地址:" :label-width="formLabelWidth">
                    <el-input placeholder="请输入内容" v-model.trim="resource.uri" auto-complete="off" style="width: 400px"/>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="addLabelVisible = false">取消</el-button>
                <el-button size="small" type="primary" @click="addConfirm">{{staffbtn}}</el-button>
            </div>
        </el-dialog>
    </section>
</template>

<script>
import {
    addResource,
    getResourceList,
    echoResource,
    deleteResource,
    getResourceModuleName,
    editResource
} from "../../api/api";
export default {
    data() {
        return {
            closeOnClickModal: false,
            total: 0,
            stafftype: "",
            stafftitle: "",
            staffbtn: "",
            tableData: [],
            addLabelVisible: false,
            formLabelWidth: "80px",
            listLoading: false,
            resource: {
                title: "",
                uri: "",
                moduleName: ""
            },
            // options:[ "会员管理", "订单管理", "财务管理", "数据统计", "其他管理", "权限管理", "系统设置"],
            options: [],
            addchecked: false
        };
    },
    methods: {
        handleCurrentChange(val) {
            this.currentPage = val;
            this.onSubmit(val);
        },
        onSubmit(val) {
            this.getlist(val);
        },
        addLabel() {
            this.stafftype = "add";
            this.addLabelVisible = true;
        },
        addchange() {
            this.resource.moduleName = "";
        },
        addConfirm() {
            if (
                this.resource.title == "" ||
                this.resource.uri == "" ||
                this.resource.moduleName == ""
            ) {
                this.$message({
                    showClose: true,
                    message: "信息不能为空"
                });
                return;
            }
            if (this.stafftype == "add") {
                addResource(this.resource).then(res => {
                    this.$message({
                        showClose: true,
                        message: "添加成功"
                    });
                    this.addLabelVisible = false;
                    this.getlist();
                });
            } else {
                editResource(this.resource).then(res => {
                    this.$message({
                        showClose: true,
                        message: "添加成功"
                    });
                    this.addLabelVisible = false;
                    this.getlist();
                });
            }
        },
        getlist() {
            this.listLoading = true;
            getResourceList({
                pageNum: this.currentPage
            }).then(res => {
                this.listLoading = false;
                this.tableData = res.data.list;
                this.total = Math.ceil(res.data.total / 50);
            });
        },
        //关闭弹窗
        closedailog() {
            const resource = {
                title: "",
                uri: "",
                moduleName: ""
            };
            this.resource = resource;
            this.options = [];
            this.addchecked = false;
        },

        //打开弹窗
        opendailog() {
            this.stafftype == "add"
                ? (this.stafftitle = "添加新资源")
                : (this.stafftitle = "修改资源");
            this.stafftype == "add"
                ? (this.staffbtn = "添加")
                : (this.staffbtn = "修改");
            getResourceModuleName().then(res => {
                this.options = res.data;
            });
        },
        //删除资源
        deladmin(index, id) {
            this.$confirm("此操作将永久删除该用户信息, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    deleteResource({
                        resourceId: id
                    })
                        .then(res => {
                            // 改变页面显示
                            this.tableData.splice(index, 1);
                            // 提示成功
                            this.$message({
                                type: "success",
                                message: "删除成功!"
                            });
                        })
                        .catch(() => {
                            this.$message.error("网络挂啦，请求不到数据！");
                        });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除"
                    });
                });
        },
        //修改资源回显
        editLable(id) {
            this.stafftype = "edit";

            this.addLabelVisible = true;

            echoResource({
                resourceId: id
            }).then(res => {
                this.resource = res.data;
            });
        }
    },
    mounted() {
        this.getlist();
    }
};
</script>

<style scoped>
.isaddRname label.el-checkbox {
    margin-top: 0;
}
</style>
